import { Button, Col, Pagination, Row, Space, Table, Tag } from "antd";
import { Outlet, useNavigate } from "react-router-dom";
import CustomSearch from "@/pages/Components/Search";
import { PlusOutlined, RedoOutlined, SearchOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";

import { http } from "@/utils";

const RoleList = () => {
  const [roleList, setRoleList] = useState({
    list: [],
    count: 0, //总计
  });
  const [current, setCurrent] = useState(1);
  const onChange = (_page, _limit) => {
    console.log("onChange", _page, _limit);
    // setCurrent(page);
    setParams({
      ...params,
      _page,
      _limit,
    });
  };

  const [params, setParams] = useState({
    _page: 1,
    _limit: 10,
  });

  const navigate = useNavigate();

  useEffect(() => {
    const loadRoleList = async () => {
      // await
      // todo 获取用户数据列表
      const res = await http.get("http://localhost:3001/roleList", { params });
      // console.log('res',res)
      setRoleList({
        list: res,
        count: 100,
      });
    };
    loadRoleList();
  }, [params]);
  const add = () => {
    navigate("/system/role/add-role");
  };

  const edit = (record) => {
    console.log("编辑", record);
    navigate(`/system/role/edit-role/?id=${record.key}`);
  };

  const tagToggle = (e) => {
    // console.log(e)
    setStatus(!status);
  };

  const [status, setStatus] = useState(false);

  const columns = [
    {
      title: "序号",
      dataIndex: "key",
      key: "key",
      // render: (text) => <a>{text}</a>,
    },
    {
      title: "角色名称",
      dataIndex: "roleName",
      key: "roleName",
    },
    {
      title: "权限",
      dataIndex: "authorityName",
      key: "authorityName",
    },
    {
      title: "状态",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 2 ? "geekblue" : "green";
            if (tag === "停用") {
              color = "volcano";
            }
            return (
              <Tag color={color} key={tag}>
                {/*{tag.toUpperCase()}*/}
                {`${tag ? "启用" : "停用"}`}
              </Tag>
            );
          })}
        </>
      ),
      // render:data=>(
      //   <Tag color='green' >
      //     {data}
      //  </Tag>
      // )
    },
    {
      title: "更新时间",
      dataIndex: "updateTime",
      key: "updateTime",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a>详情</a>
          <a onClick={() => edit(record)}>编辑</a>
          <a onClick={() => tagToggle(record.key)}>{`${
            status ? "启用" : "停用"
          }`}</a>
        </Space>
      ),
    },
  ];

  const style = {
    background: "#0092ff",
    padding: "8px 0",
  };

  const rowStyle = {
    marginTop: "10px",
  };
  return (
    <div>
      {/*搜索区域*/}
      <div style={{ padding: "20px", width: "88%" }}>
        <Row gutter={[16, 20]}>
          <Col span={8} style={rowStyle}>
            <div style={{ display: "flex", alignItems: "center" }}>
              <span style={{ width: "100px", textAlign: "right" }}>
                角色名称：
              </span>
              <CustomSearch />
            </div>
          </Col>
          <Col span={8} style={rowStyle}>
            <div style={{ display: "flex", alignItems: "center" }}>
              <span style={{ width: "100px", textAlign: "right" }}>
                权限名称：
              </span>
              <CustomSearch />
            </div>
          </Col>
        </Row>
      </div>
      {/*按钮区域*/}
      <div
        style={{
          padding: "10px",
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <div>
          <Button
            onClick={add}
            type="primary"
            icon={<PlusOutlined />}
            style={{ marginRight: "20px" }}
          >
            新增角色
          </Button>
        </div>
        <div>
          <Button
            type="primary"
            icon={<SearchOutlined />}
            style={{ marginRight: "20px" }}
          >
            搜索
          </Button>
          <Button type="primary" danger icon={<RedoOutlined />}>
            重置
          </Button>
        </div>
      </div>
      {/*表格区域*/}
      <div style={{ padding: "10px" }}>
        <Table
          columns={columns}
          dataSource={roleList.list}
          pagination={false}
          scroll={{ y: "calc(100vh - 500px)" }}
        />
      </div>
      {/*分页区域*/}

      <div
        style={{
          display: "flex",
          justifyContent: "flex-end",
          paddingRight: "30px",
        }}
      >
        <Pagination
          total={roleList.count}
          showSizeChanger
          current={params._page}
          pageSize={params._limit}
          onChange={onChange}
          pageSizeOptions={[10, 20, 30, 50]}
          showQuickJumper
          showTotal={(total) => `总计 ${total} 条`}
        />
      </div>
    </div>
  );
};

export default RoleList;
